import React, { FC, useEffect, useState } from 'react';
import styles from './songList.less';
import {
  PageHeader,
  Button,
  Spin,
  Radio,
  Row,
  Col,
  Card,
  Pagination,
} from 'antd';
import { connect, ConnectProps, history, SongListModelState } from 'umi';
import CatlistModel from '@/compoments/catlistModel/catlistModel';
import { tranNumber } from '@/utils';
import { PlayCircleOutlined } from '@ant-design/icons';
import CardCover from '@/compoments/cardCover/cardCover';

const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
];

interface PageProps extends ConnectProps {
  songList: SongListModelState;
  dispatch: any;
}

const SongList: FC<PageProps> = (props: any) => {
  let { songList } = props;
  const [visible, setVisible] = useState(false);
  const [catData, setCatData] = useState(
    props.location.query.cat ? props.location.query.cat : '',
  );
  const [order, setOrder] = useState('hot');
  const [offset, setOffset] = useState(1);
  const [limit, setLimit] = useState(30);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    dataSource();
    getPlaylist();
  }, [order, offset, limit, catData]);

  let dataSource = () => {
    props.dispatch({
      type: 'songList/getCatlist',
    });
  };

  let getPlaylist = () => {
    setLoading(true);
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    props
      .dispatch({
        type: 'songList/getPlaylist',
        payload: {
          order: order,
          cat: catData,
          limit: limit,
          offset: offset,
        },
      })
      .then((res: any) => {})
      .finally(() => {
        setLoading(false);
      });
  };

  let setCat = (data: any) => {
    closeModel();
    setCatData(data.name);
    history.push({
      pathname: '/songList',
      query: {
        cat: data.name,
      },
    });
  };

  let closeModel = () => {
    setVisible(false);
  };

  const onChangeHot = (e: any) => {
    setOrder(e.target.value);
    //getPlaylist()
  };

  const changePagination = (page: number) => {
    setOffset(page);
    //getPlaylist()
  };
  const changeSize = (current: number, size: number) => {
    setLimit(size);
    //getPlaylist()
  };

  return (
    <div className={styles.songList}>
      <Spin spinning={loading} delay={500}>
        <PageHeader
          ghost={false}
          backIcon={false}
          tags={
            <Button
              type="primary"
              ghost
              onClick={() => {
                setVisible(true);
              }}
            >
              选择分类
            </Button>
          }
          title={songList.cat}
          extra={[
            <Radio.Group
              defaultValue={order}
              buttonStyle="solid"
              key="0"
              onChange={onChangeHot}
            >
              <Radio.Button value="hot">最热</Radio.Button>
              <Radio.Button value="new">最新</Radio.Button>
            </Radio.Group>,
          ]}
        ></PageHeader>

        <div className={styles.playlists}>
          <Row gutter={25}>
            {songList.playlists.map((data: any, index: number) => (
              <Col className="gutter-row" span={4} key={index}>
                <Card
                  hoverable
                  className={styles.cartItem}
                  bordered={false}
                  bodyStyle={{ padding: '0' }}
                  cover={
                    <CardCover data={data} imgLabel={'coverImgUrl'}></CardCover>
                  }
                ></Card>
                <div className={styles.cartMeta}>
                  <p className={styles.ant_card_meta_title}>{data.name}</p>
                  <p className={styles.nickname}>{data.creator.nickname}</p>
                  <p className={styles.ant_card_meta_description}>
                    播放量：{tranNumber(data.playCount, 2)}
                  </p>
                </div>
              </Col>
            ))}
          </Row>
        </div>

        <div className={styles.textCenter}>
          <Pagination
            total={songList.total}
            showTotal={(total, range) =>
              `${range[0]}-${range[1]} of ${total} items`
            }
            pageSize={limit}
            current={offset}
            onChange={page => {
              changePagination(page);
            }}
            onShowSizeChange={(current, size) => {
              changeSize(current, size);
            }}
          />
        </div>
      </Spin>

      <CatlistModel
        visible={visible}
        catlistData={songList.catlistData}
        setCat={setCat}
        catData={catData}
        closeModel={closeModel}
      ></CatlistModel>
    </div>
  );
};

export default connect(({ songList }: { songList: SongListModelState }) => ({
  songList,
}))(SongList);
